<template>
  <div class="filter-select">
    <a-select
      ref="select"
      v-model:value="value"
      :style="`width:${width}px`"
      show-search
      :filter-option="filterOption"
      :options="filterList"
      :field-names="fieldNames"
      :placeholder="placeholder"
      @change="onChange"
    ></a-select>
  </div>
  <div class="button-box">
    <a-button type="primary" size='small' @click="onConfirm">确定</a-button>
     <a-button type="text" :disabled='disabled' @click="onReset"> 重置</a-button>
  </div>
</template>

<script setup>
import { ref , watch } from "vue";

const emit = defineEmits(['confirm'])
const props = defineProps({
  filterList: {
    type: Array,
    default: () => [],
  },
  fieldNames: {
    type: Object,
    default: {
      value:'value',
      label:'label'
    },
  },
  width: {
    type: Number,
    default: 200,
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
});


const disabled = ref(true)
const value = ref(undefined);
const item = ref(undefined)

const onReset = () =>{
  value.value = undefined
  item.value = undefined
}
const onConfirm = () =>{
  emit('confirm',item.value)
}

const onChange = (val, option) =>{
  item.value = option;
  value.value = val;
}
const filterOption = (input, option) => {
    return option[props.fieldNames.label].toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

watch(value,(val)=>{
  disabled.value = val == null;
},{deep:true,immediate:true})

</script>

<style lang="less" scoped>
.filter-select {
  padding: 5px 12px;
  padding-top:12px;

}
.button-box {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin-top: 10px;
  padding: 5px 12px;
  border-top: 1px solid #f0f0f0;
  
}
</style> 